<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta content="text/html;charset=UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>登录页面</title>
    <link rel="shortcut icon" href="./img/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}"/>
    <link rel="stylesheet" th:href="@{/css/login.css}"/>
    <script th:src="@{/js/jquery.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>

    <style type="text/css">
        html {
            height: 100%;
            padding: 0;
            margin: 0;
            /*background-color: #dfd9e2;*/
        }

        body {
            /*padding-top: 50px;*/
            height: 100%;
            padding: 0;
            margin: 0;
        }

        .starter-template {
            padding: 40px 15px;
            text-align: center;
        }

        span {
            font-family: 黑体, 微软雅黑, 宋体;
            font-size: 45px;
            position: absolute;
            left: 40px;
            top: 40px;
            /*font-style:oblique;*/
            color: #005A5A;
        }
    </style>
</head>
<body style="overflow-y: hidden">
<div class="container  top-container">

    <div class="starter-template">
        <div class="logo"></div>
        <p th:if="${param.logout}" class="bg-warning">已成功注销</p>
        <!-- 1 -->
        <p th:if="${param.error}"
        th:text="${session.SPRING_SECURITY_LAST_EXCEPTION.message}=='Bad credentials'?'账号/密码错误！':'用户账号已被冻结或服务器连接异常！'"
           class="bg-danger"></p>


        <!--th:text="${session.SPRING_SECURITY_LAST_EXCEPTION.message}=='Bad credentials'?'账号/密码错误！':'服务器异常！'"-->

           <!--th:text="${session.SPRING_SECURITY_LAST_EXCEPTION.message}=='Bad credentials'?'账号/密码错误！':${session.SPRING_SECURITY_LAST_EXCEPTION.message}"-->

        <!-- 2 -->
        <h3>使用账号密码登录</h3>
        <form id="form" name="form" th:action="@{/login}" action="/login" method="POST"
              onsubmit="return post()">
            <!-- 3 -->
            <div class="form-group">
                <label for="username">请输入账号</label> <input type="text"
                                                           class="form-control" name="username" id="username"
                                                           placeholder="账号"/>
            </div>
            <div class="form-group">
                <label for="password">请输入密码</label> <input type="password"
                                                           class="form-control" name="password" id="password"
                                                           placeholder="密码"/>
            </div>
            <input type="submit" id="login" value="登录"
                   style="width: 295px;margin-top: 20px" class="btn btn-primary"/>
        </form>
    </div>

</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-hidden="true">×
                </button>
                <h4 class="modal-title" id="myModalLabel">操作错误</h4>
            </div>
            <div class="modal-body">用户名或密码不能为空</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                </button>
            </div>
        </div>
    </div>
</div>
<!-- /.modal -->
<span>BOM管理系统</span>
</body>
<script type="text/javascript">
    function post() {
        if ($("#username").val().length == 0
            || $("#password").val().length == 0) {
            $("#myModal").modal('show');
            return false;
        } else
            return true;
    }

    // $(document).ready((
    //     function () {
    //         $("#form").submit();
    //     }
    // ))
</script>
</html>